<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Animated Star</title>
	<link rel="stylesheet" href="../css/style.css">
	<script type="text/javascript" src="../../lib/paper.js"></script>
	<script type="text/javascript">
		window.onload = function() {
			var canvas = document.getElementById('canvas');
			// the global paper variable now points to this new PaperScope.
//			with (new paper.PaperScope(canvas)) {
			// Make the paper scope objects global:
			paper.install(window);
			// Create a project and a view for the canvas for us:
			paper.setup(canvas);
			var layer = project.activeLayer;

			var values = {
				count: 34,
				points: 32
			};

			for (var i = 0; i < values.count; i++) {
				var offset = new Point(20 + 10 * i, 0);
				var path = new Path();
				path.fillColor = i % 2 ? 'red' : 'black';
				path.closed = true;

				var l = offset.length;
				for (var j = 0; j < values.points * 2; j++) {
					offset.angle += 360 / values.points;
					var vector = offset.normalize(l * (j % 2 ? 0.1 : -0.1));
					path.add(offset.add(vector));
				}
				path.smooth();
				var placedSymbol = new PlacedSymbol(path);
				layer.insertChild(0, placedSymbol);
			}
			layer.position = view.center;

			view.onFrame = function(event) {
				for (var i = 0, l = layer.children.length; i < l; i++) {
					var item = layer.children[i];
					var angle = (values.count - i) * Math.sin(event.count / 128) / 10;
					item.rotate(angle);
				}
			};

			// Reposition the paths whenever the window is resized:
			view.onResize = function(event) {
				layer.position = view.center;
			};
//			}
		}
	</script>
</head>
<body>
	<canvas id="canvas" resize></canvas>
</body>
</html>